define('pc/js/mod/write/vue-write-post', [
    'utils/fetchEnhancer',
    'utils/RichContent',
    'utils/helpers',
    'pc/js/mod/write/CoverImageCanvas',
    'pc/js/mod/write/Editor',
    'pc/js/mod/write/Cate',
    'pc/js/mod/write/Tag',
    'pc/js/mod/write/Copyright',
    'pc/js/mod/write/license'
], (fetch, RichContent, helpers, CoverImageCanvas, Editor, Cate, Tag, Copyright, license) => {

const Post = {
    methods: {
        checkCanEdit: function() {
            fetch('/api/post/can').then((res) => {
                if(0 !== res.status) {
                    XUI.dialog.alert('暂时无法编辑文章');
                }
            });
        },
        initHeadImage: function() {
            this.headImage = CoverImageCanvas.init('coverimage');
        },
        initEditor: function() {
            this.editor = Editor.init('writing-editor', 'text');
        },
        initCategory: function() {
            this.category = Cate.init('category');
        },
        initTag: function() {
            this.tag = Tag.init('tag');
        },
        initCopyright: function() {
            this.copyright = Copyright.init('copyright', 'copyrightdesc');
        },
        initAgreement: function() {
            // 条例
            this.agreement = document.getElementById('agreement');

            // event
            this.agreement.onclick = (e) => {
                let target = e.target;
                let nodeName = target.nodeName.toUpperCase();

                if('A' === nodeName) {
                    XUI.dialog.showWithBtn(license, '详情', XUI.BTN_OK, {
                        dialogWidth: 600
                    });

                    return;
                }

                if('LABEL' === nodeName) {
                    target.className = target.className.indexOf('active') > 0
                        ? 'writing-license'
                        : 'writing-license active';
                }
            };
        },

        handleCollapse: function(e) {
            let t = e.target;
            let role = t.getAttribute('data-role');

            if('collapse' !== role) {
                return;
            }

            let dest = t.parentNode.querySelector('.writing-panelsection-content');
            if('none' === dest.style.display) {
                dest.style.display = 'block';
            } else {
                dest.style.display = 'none';
            }
        },
        handlePost: function(e) {
            if(-1 === this.agreement.className.indexOf('active')) {
                XUI.toast.error('请认真阅读并同意内容发布规范');
                return;
            }

            let doc = this.agreement.ownerDocument;
            let data = {
                cate_id: this.category.getValue(),
                title: doc.getElementById('title').value,
                tags: this.tag.getValue(),
                brief: doc.getElementById('brief').value,
                copyright: this.copyright.getValue()
            };
            let thumb = this.headImage.getBase64();
            let content = this.editor.getContent();
            let plain = this.editor.getPlainText();

            if(!thumb) {
                XUI.toast.error('请上传封面图');
                return;
            }
            if(!data.title) {
                XUI.toast.error('请填写标题');
                return;
            }
            if(plain.length < 10) {
                XUI.toast.error('文章文字内容太少了');
                return;
            }
            if(plain.length > 20000) {
                XUI.toast.error('文章超过 2w 字，建议拆分几篇来写哦');
                return;
            }
            if(!data.cate_id) {
                XUI.toast.error('请选择文章分类');
                return;
            }

            if(!data.brief) {
                data.brief = plain.length > 150 ? plain.substring(0, 150) : plain;
            }

            content = new RichContent().htmlToProtocol(content);
            content = helpers.filterTags(content);
            // console.log(content);return;

            let ret = 'cate_id=' + data.cate_id
                + '&copyright=' + data.copyright
                + '&title=' + encodeURIComponent(data.title)
                + '&tags=' + encodeURIComponent(data.tags)
                + '&brief=' + encodeURIComponent(data.brief)
                + '&content=' + encodeURIComponent(content)
                + '&thumb=' + thumb;

            e.target.disabled = true;
            fetch('/api/post/add', {
                method: 'POST',
                body: ret
            }).then((res) => {
                e.target.disabled = false;
                if(0 === res.status) {
                    doc.getElementById('title').value = '';
                    this.editor.setContent('');

                    location.href = '/write#/write/list';
                } else {
                    XUI.toast.error('服务器出错 ' + res.status);
                }
            });
        }
    },
    mounted: function() {
        this.checkCanEdit();

        this.initHeadImage();
        this.initEditor();
        this.initCategory();
        this.initTag();
        this.initCopyright();
        this.initAgreement();
    },
    template:
`<div class="writing-wrapper" @click="handleCollapse">
    <div id="coverimage" class="writing-cover-wrapper"></div>

    <div class="writing-section writing-title-wrapper">
        <input id="title" type="text" placeholder="在这里输入标题" autocomplete="off" maxlength="70" />
    </div>

    <div class="writing-section">
        <div id="writing-editor"></div>
        <div id="wordcount" class="writing-counter">已输入0个字</div>
    </div>

    <div class="writing-section">
        <div class="writing-section-title">请选择文章分类</div>
        <div class="writing-section-content">
            <div id="category"></div>
        </div>
    </div>

    <div class="writing-panelsection">
        <div data-role="collapse" class="writing-panelsection-title">内容简介（可选）</div>
        <div class="writing-panelsection-content" style="display: none">
            <textarea id="brief" class="x-textarea" maxlength="150" rows="3" placeholder="写写文章的亮点或主要内容吧"></textarea>
        </div>
    </div>

    <div class="writing-panelsection">
        <div data-role="collapse" class="writing-panelsection-title">为文章添加标签（可选）</div>
        <div class="writing-panelsection-content" style="display: none">
            <div id="tag" class="writing-addtag-wrapper"></div>
        </div>
    </div>

    <div class="writing-panelsection">
        <div data-role="collapse" class="writing-panelsection-title">请选择文章版权（可选）</div>
        <div class="writing-panelsection-content" style="display: none">
            <div class="writing-copyright-select-wrapper">
                <div id="copyright" class="writing-copyright-select"></div>
            </div>
            <div id="copyrightdesc" class="writing-copyright-info"></div>
        </div>
    </div>

    <div class="writing-section">
        <label id="agreement" class="writing-license">我已阅读并接受本站<a href="javascript:;">《内容发布规范》</a></label>
    </div>

    <div class="writing-section writing-footer">
        <button @click="handlePost" type="button" class="x-btn x-btn-blue">发布</button>
    </div>
</div>`
};
return Post;

});
